<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>n的值是{{n}}</h1>
    <button @click="n++">带点我给n+1</button>
<!--    v-show true 展现div false 隐藏true 控制的是display属性 适用于切换频率高的场景中-->
<!--    <div v-show="false">你好</div>-->
<!--    v-if true 在页面渲染该元素 false 不渲染该元素 根本获取不到-->
<!--    <div v-if="true">你好</div>-->

<!--    <div v-if="n ===1">Angular</div>-->
<!--    <div v-if="n ===2">React</div>-->
<!--    <div v-if="n ===3">Vue</div>-->

<!--    v-else-if v-else 和js中的 else if 与 else 一样的效果 而且这些标签必须要连续 -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n===3">Vue</div>
    <div v-else>直接原生猛干</div>
  </div>
  <script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    new Vue({
      el:'#root',
      data:{
        n:0
      }
    });
  </script>
</body>
</html>